<template>
  <div>
    <div v-if="mandyUser.userState === '0' || mandyUser.userState === '1'">
      <el-container>
        <el-card class="box-card">
          <div slot="header"
               class="clearfix">
            <span>欢迎您！请完善您的详细信息,
              修改并保管好个人密码！</span>
            <el-tag type="success">
              {{
                                getDictLabel("user_state", mandyUser.userState)
                            }}
            </el-tag>
            <el-button @click="handleRegister"
                       size="small"
                       style="float: right; ">完成，提交审核</el-button>
          </div>

          <el-form :model="mandyUser"
                   :rules="registerRules"
                   ref="registerForm"
                   label-width="150px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="单位部门">
                  <el-input :disabled="true"
                            v-model="mandyUser.newDepartmentName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="角色权限"
                              prop="department">
                  <el-tag v-for="n in getUserRoleInUsed()"
                          :key="n"
                          type="info">
                    {{ n }}
                  </el-tag>
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider content-position="left">以下字段可修改编辑</el-divider>
            <el-row>
              <el-col :span="4">
                <el-form-item>
                  <my-upload field="img"
                             @crop-success="cropSuccess"
                             v-model="show"
                             :width="200"
                             :height="200"
                             :isXhr="false"
                             :noRotate="false"
                             img-format="png"></my-upload>
                  <el-avatar :size="100"
                             :src="avatar"
                             @click="toggleShow"></el-avatar>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <el-button @click="toggleShow"
                             size="small">设置头像</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="姓名"
                              prop="name">
                  <el-input v-model="mandyUser.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="登录名"
                              prop="username">
                  <el-input v-model="mandyUser.username"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="登录密码"
                              prop="password">
                  <el-input type="password"
                            clearable
                            auto-complete="new-password"
                            :show-password="true"
                            v-model="mandyUser.password"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="确认登录密码"
                              prop="password2">
                  <el-input type="password"
                            clearable
                            auto-complete="new-password"
                            :show-password="true"
                            v-model="mandyUser.password2"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="手机号码"
                              prop="mobile">
                  <el-input v-model="mandyUser.mobile"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电子邮箱"
                              prop="email">
                  <el-input v-model="mandyUser.email"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-container>
    </div>
    <div v-else-if="mandyUser.userState === '9'">
      <el-container>
        <el-card class="box-card">
          <div slot="header"
               class="clearfix">
            <span>您好！您的密码已经被重置, 请及时修改密码！</span>
            <el-button @click="handlePasswordUpdate"
                       size="small"
                       style="float: right; ">提交修改</el-button>
          </div>
          <el-form :model="myuser.mandyUser"
                   :rules="registerRules"
                   ref="passwordForm"
                   label-width="150px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="登录密码"
                              prop="password">
                  <el-input type="password"
                            clearable
                            auto-complete="new-password"
                            :show-password="true"
                            v-model="myuser.mandyUser.password"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="确认登录密码"
                              prop="password2">
                  <el-input type="password"
                            clearable
                            auto-complete="new-password"
                            :show-password="true"
                            v-model="myuser.mandyUser.password2"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-container>
    </div>
    <div v-else>
      欢迎使用!
    </div>
  </div>
</template>
<script>
import jic from "j-i-c";
import "babel-polyfill"; // es6 shim
import myUpload from "vue-image-crop-upload";
import { mapGetters } from "vuex";
import { register, passwordUpdate } from "@/api/login";
import { getToken } from "@/utils/auth";
import { getLabel, getEntries, hasPermission } from "@/utils/dict";

export default {
  name: "MandyHome",

  data() {
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.myuser.mandyUser.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      imgDataUrl: "",
      show: false,
      size: 2.1,

      registerParam: {
        email: "",
        mobile: "",
        name: "",
        username: "",
        password: "",
        password2: "",
        avatarData: ""
      },

      inputType: "text",

      registerRules: {
        name: [
          {
            required: true,
            message: "请输入您的真实姓名",
            trigger: "blur"
          },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur"
          }
        ],
        username: [
          {
            required: true,
            message: "请输入您喜欢的易记的登录名",
            trigger: "blur"
          },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入登录密码",
            trigger: "blur"
          },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur"
          }
        ],
        password2: [
          {
            required: true,
            message: "请再次输入登录密码, 确保一致",
            trigger: "blur"
          },
          {
            validator: validatePass,
            trigger: "blur"
          }
        ]
      },

      myMap: null
    };
  },

  components: {
    "my-upload": myUpload
  },

  computed: {
    ...mapGetters(["myuser", "mandyUser", "avatar"])
  },

  methods: {
    toggleShow() {
      this.show = !this.show;
    },

    messageSuccess() {
      this.$message({
        type: 'success',
        message: '提交成功!',
        duration: 3000
      });
    },

    getDictLabel(dictKey, dictValue) {
      return getLabel(dictKey, dictValue);
    },

    /**
     * crop success
     *
     * [param] imgDataUrl
     * [param] field
     */
    cropSuccess(imgDataUrl, field) {
      this.registerParam.avatarData = imgDataUrl;
      this.$store.dispatch("SetAvatar", imgDataUrl);
    },

    changeInputType() {
      this.inputType = "password";
    },

    getUserRoleInUsed() {
      let ret = [];
      if (
        this.myuser.rolesUnavailable !== undefined &&
        this.myuser.rolesUnavailable !== null
      ) {
        this.myuser.rolesUnavailable.forEach(element => {
          ret.push(element.title);
        });
      }
      return ret;
    },

    handleRegister() {
      this.$refs["registerForm"].validate(valid => {
        if (valid) {
          this.isLoading = true;

          this.registerParam.email = this.mandyUser.email;
          this.registerParam.mobile = this.mandyUser.mobile;
          this.registerParam.username = this.mandyUser.username;
          this.registerParam.name = this.mandyUser.name;
          this.registerParam.avatarData = this.avatar;
          this.registerParam.password = this.mandyUser.password;

          register(this.registerParam).then(response => {
            this.$alert(
              "注册信息提交成功, 等待审核通过",
              "退出登录",
              {
                confirmButtonText: "确定",
                callback: action => {
                  this.$store
                    .dispatch("FedLogOut")
                    .then(() => {
                      location.reload(); // 为了重新实例化vue-router对象 避免bug
                    });
                }
              }
            );
          });
          this.isLoading = false;
        }
      });
    },

    handlePasswordUpdate() {
      this.$refs["passwordForm"].validate(valid => {
        if (valid) {
          this.isLoading = true;
          passwordUpdate(this.myuser.mandyUser).then(response => {
            this.messageSuccess();
          });
          this.isLoading = false;
        }
      });
    }
  }
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.text {
  font-size: 14px;
}

/* .item {
  margin-bottom: 18px;
} */

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  height: 100%;
}

.item_bock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 94px;
  width: 300px;
  padding: 0px 24px 0px 38px;
  border-bottom: 1px solid #f7f7f7;
  background: #fff;
}
.head_p {
  height: 132px;
}
.head_img {
  height: 90px;
}
.head_img img {
  width: 90px;
  height: 90px;
  border-radius: 50px;
}
.setting_right {
  display: flex;
  height: 37px;
  justify-content: flex-end;
  align-items: center;
}
.hiddenInput {
  display: none;
}
.caption {
  color: #8f8f8f;
  font-size: 26px;
  height: 37px;
}
</style>
